<template>
  <div class="recommend">
    <ul class="todayRecommend">
      <li class="clock">
        <div class="time">
          <img src="./images/clock.png" alt="" />
          <h3>今日推荐</h3>
        </div>
      </li>
      <li class="banner">
        <img src="./images/today01.png" alt="" />
      </li>
      <li class="banner">
        <img src="./images/today02.png" alt="" />
      </li>
      <li class="banner">
        <img src="./images/today03.png" alt="" />
      </li>
      <li class="banner">
        <img src="./images/today04.png" alt="" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Recommend",
  data() {
    return {};
  },
};
</script>

<style scoped lang="less">
.recommend {
  width: 1200px;
  margin: 0 auto;

  .todayRecommend {
    height: 165px;
    background-color: #eaeaea;
    margin: 10px 0;
    display: flex;

    .clock {
      width: 16.67%;
      background-color: #5c5251;
      color: #fff;
      font-size: 18px;
      text-align: center;

      .time {
        padding: 30px 0;
      }

      h3 {
        margin: 9px 0;
        font-weight: 700;
        font-size: 18px;
        line-height: 30.06px;
      }
    }

    .banner {
      width: 20.83%;

      img {
        width: 100%;
        height: 100%;
        transition: all 0.4s;
      }
    }
  }
}
</style>
